﻿//
(function() {

// insert your plugin name here
// eg : var mypluginname = 'label';

var mypluginname = 'chronometer';

$(window).data('gui').plugins[mypluginname] =
{

// makeHTML is called to create the html elements
// options are in your ui.xml
makeHTML : function(param)
{
/*
options['titlebar-fixe'];
*/

	var obj = document.createElement("div"); // don't erase
	obj.setAttribute('data-effect','box');
	param.parent.appendChild(obj);
	
	var format = param.xml.getAttribute('data-format');
	format = (format === null) ? 'h:m:s' : format.trim().toLowerCase();
	param.xml.setAttribute('data-format',format);
	
	var play = param.xml.getAttribute('data-play');
	play = (play === null) ? play = 'reset' : play.trim().toLowerCase();
	param.xml.setAttribute('data-play',play);

	formatarray = format.split(':');


	for (var r = 0; r < formatarray.length;r++)
	{
		if (r>0 && (formatarray[r] == 'h' || formatarray[r] == 'm' || formatarray[r] == 's' ||
						formatarray[r] == 'd' || formatarray[r] == 'dd' || formatarray[r] == 'ddd'))
		{
			var sep1 = document.createElement("div"); // :
			var sep1c = document.createElement("div");
			//sep1c.setAttribute('data-effect','text');
			$(sep1c).text(':');
			sep1.appendChild(sep1c);
			obj.appendChild(sep1);
		}

		if (formatarray[r] === 'h')
		{
			var dh = document.createElement("div"); // dizaine heure
			var dhc = document.createElement("div");
			dhc.setAttribute('class','tenhour moveten');
			//dhc.setAttribute('data-effect','text');
			$(dhc).text('0 1 2 3 4 5 6 7 8 9');
			dh.appendChild(dhc);

			var mh = document.createElement("div"); // minute heure
			var mhc = document.createElement("div");
			mhc.setAttribute('class','hour moveten');
			//mhc.setAttribute('data-effect','text');
			$(mhc).text('0 1 2 3 4 5 6 7 8 9');
			mh.appendChild(mhc);
			obj.appendChild(dh);
			obj.appendChild(mh);
		} else if (formatarray[r] === 'm')
		{
			var dm = document.createElement("div");
			var dmc = document.createElement("div");
			dmc.setAttribute('class','tenminute movesix');
			//dmc.setAttribute('data-effect','text');
			$(dmc).text('0 1 2 3 4 5 6');
			dm.appendChild(dmc);

			var mm = document.createElement("div"); // minute heure
			var mmc = document.createElement("div");
			mmc.setAttribute('class','minute moveten');
			//mmc.setAttribute('data-effect','text');
			$(mmc).text('0 1 2 3 4 5 6 7 8 9');
			mm.appendChild(mmc);
			obj.appendChild(dm);
			obj.appendChild(mm);
		} else if (formatarray[r] === 's')
		{
			var ds = document.createElement("div");
			var dsc = document.createElement("div");
			dsc.setAttribute('class','tensecond movesix');
			//dsc.setAttribute('data-effect','text');
			$(dsc).text('0 1 2 3 4 5 6');
			ds.appendChild(dsc);

			var ms = document.createElement("div"); // minute heure
			var msc = document.createElement("div");
			msc.setAttribute('class','second moveten');
			//msc.setAttribute('data-effect','text');
			$(msc).text('0 1 2 3 4 5 6 7 8 9');
			ms.appendChild(msc);
			obj.appendChild(ds);
			obj.appendChild(ms);
		} else if (formatarray[r] == 'd' || formatarray[r] == 'dd' || formatarray[r] == 'ddd')
		{
			var mms = document.createElement("div");
			var mmsc = document.createElement("div");
			mmsc.setAttribute('class','milisecond moveten');
			//mmsc.setAttribute('data-effect','text');
			$(mmsc).text('0 1 2 3 4 5 6 7 8 9');
			mms.appendChild(mmsc);
			obj.appendChild(mms);

			if (formatarray[r] !== 'd')
			{
				var tms = document.createElement("div"); //
				var tmsc = document.createElement("div");
				tmsc.setAttribute('class','tenmilisecond moveten');
				//tmsc.setAttribute('data-effect','text');
				$(tmsc).text('0 1 2 3 4 5 6 7 8 9');
				tms.appendChild(tmsc);
				obj.appendChild(tms);

				if (formatarray[r] !== 'dd')
				{
					var hms = document.createElement("div"); //
					var hmsc = document.createElement("div");
					hmsc.setAttribute('class','hundredmilisecond moveten');
					//hmsc.setAttribute('data-effect','text');
					$(hmsc).text('0 1 2 3 4 5 6 7 8 9');
					hms.appendChild(hmsc);
					obj.appendChild(hms);
				}
			}
		}
	}

	// obj.setAttribute('data-type', mypluginname);  // deprecied, uncomment if u make a window plugin
	return obj; // don't erase
// return null if error
},

// this api can make a button element in your ui.xml
// for the future gui creator
// return a element or null if error
makeXML : function(xml)
{
	var element = xml.ownerDocument.createElement(mypluginname); // don't erase
	return element; // don't erase
	// return null if error
},
start : function()
{
	this[0].setAttribute('data-play','start');
	//var divdiv = this.jquery.find('>div>div');
	//divdiv.attr('style',"");
	//divdiv.css('-webkit-animation-play-state', 'running');
	return this;
},
stop : function()
{
	this[0].setAttribute('data-play','stop');
	return this;
},
reset : function()
{
	this[0].setAttribute('data-play','reset');
	//var divdiv = this.jquery.find('>div>div');
	//divdiv.css('-webkit-animation', 'none');
	return this;
}

}
})();